window.onload = () => {
  // webComponents实际是一个类
  class Wujie extends HTMLElement {
    constructor () {
      super()
      // 创建shadowdom  样式隔离,不会影响外层的样式
      let dom = this.attachShadow({ mode: "open" })
      let template = document.querySelector("#wujie") as HTMLTemplateElement

      dom.appendChild(template.content.cloneNode(true))

      console.log(this.getAttr("url"), this.getAttr("age"))
    }
    // 接收参数
    private getAttr (attr: string) {
      return this.getAttribute(attr)
    }
    // 生命周期

    //生命周期自动触发有东西插入
    connectedCallback () {
      console.log('类似于vue 的mounted');
    }
    //生命周期卸载
    disconnectedCallback () {
      console.log('类似于vue 的destory');
    }
    //跟watch类似
    attributeChangedCallback (name:any, oldVal:any, newVal:any) {
      console.log('跟vue 的watch 类似 有属性发生变化自动触发');
    }
  }
  // 挂载，类似于vue组件，只不过是原生js写的一个组件
  window.customElements.define('wu-jie', Wujie) // 挂载完成
}